// =============================================================================
// Transitions
// =============================================================================

$c-transition-duration: 200ms;

.c-transition-group {
  position: absolute;
  width: 100%;
  top: 0;
}

.c-transition-push-enter {
  transform: translateX(100%);
  transition: transform $c-transition-duration ease,
    opacity $c-transition-duration linear;
  opacity: 0;
}

.c-transition-push-enter-active {
  transform: translateX(0);
  opacity: 1;
}

.c-transition-push-leave {
  transform: translateX(0);
  transition: transform $c-transition-duration ease,
    opacity $c-transition-duration linear;
  opacity: 1;
}

.c-transition-push-leave-active {
  transform: translateX(-100%);
  opacity: 0;
}

// =============================================================================
// Pop transition
// =============================================================================
.c-transition-pop-enter {
  transform: translateX(-100%);
  transition: transform $c-transition-duration ease,
    opacity $c-transition-duration linear;
  opacity: 0;
}

.c-transition-pop-enter-active {
  transform: translateX(0);
  opacity: 1;
}

.c-transition-pop-leave {
  transform: translateX(0);
  transition: transform $c-transition-duration ease,
    opacity $c-transition-duration linear;
  opacity: 1;
}

.c-transition-pop-leave-active {
  transform: translateX(100%);
  opacity: 0;
}
